<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息通知 - 售后管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
        }

        .back-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .notification-list {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .notification-item {
            border-bottom: 1px solid #e1e5e9;
            padding: 20px;
            transition: background-color 0.2s ease;
        }

        .notification-item:hover {
            background-color: #f8f9fa;
        }

        .notification-item.unread {
            background-color: #f0f8ff;
        }

        .notification-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .notification-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .notification-time {
            font-size: 12px;
            color: #666;
        }

        .notification-content {
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .notification-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }

        .type-system {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .type-message {
            background-color: #f3e5f5;
            color: #7b1fa2;
        }

        .type-work-order {
            background-color: #fff3e0;
            color: #f57c00;
        }

        .type-complaint {
            background-color: #ffebee;
            color: #d32f2f;
        }

        .type-rule-change {
            background-color: #e8f5e8;
            color: #388e3c;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .empty-state h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .loading {
            text-align: center;
            padding: 40px;
        }

        .spinner {
            border: 2px solid #f3f3f3;
            border-top: 2px solid #667eea;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            display: inline-block;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .filter-section {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .filter-row {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-group label {
            font-weight: 500;
            color: #333;
        }

        .filter-group select {
            padding: 8px 12px;
            border: 2px solid #e1e5e9;
            border-radius: 5px;
            font-size: 14px;
        }

        .filter-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .mark-all-read {
            background: #28a745;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>消息通知</h1>
        <a href="/after_sale_system/page/consumer" class="back-btn">返回首页</a>
    </div>

    <div class="container">
        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-group">
                    <label>类型筛选:</label>
                    <select id="typeFilter">
                        <option value="">全部类型</option>
                        <option value="SYSTEM">系统通知</option>
                        <option value="MESSAGE">消息通知</option>
                        <option value="WORK_ORDER">工单通知</option>
                        <option value="COMPLAINT">投诉通知</option>
                        <option value="RULE_CHANGE">规则变更</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>状态筛选:</label>
                    <select id="statusFilter">
                        <option value="">全部状态</option>
                        <option value="unread">未读</option>
                        <option value="read">已读</option>
                    </select>
                </div>
                <button class="filter-btn" onclick="loadNotifications()">筛选</button>
                <button class="mark-all-read" onclick="markAllAsRead()">全部标记为已读</button>
            </div>
        </div>

        <div class="notification-list">
            <div id="notificationContainer">
                <div class="loading">
                    <div class="spinner"></div>
                    <p>加载中...</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载时获取通知列表
        window.addEventListener('load', function() {
            loadNotifications();
        });

        // 加载通知列表
        function loadNotifications() {
            const typeFilter = document.getElementById('typeFilter').value;
            const statusFilter = document.getElementById('statusFilter').value;
            
            const params = new URLSearchParams();
            if (typeFilter) params.append('type', typeFilter);
            if (statusFilter) params.append('status', statusFilter);

            fetch(`/after_sale_system/api/notification/?${params.toString()}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        displayNotifications(data.data);
                    } else {
                        showError('获取通知失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('获取通知失败:', error);
                    showError('获取通知失败，请稍后重试');
                });
        }

        // 显示通知列表
        function displayNotifications(notifications) {
            const container = document.getElementById('notificationContainer');
            
            if (!notifications || notifications.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <h3>暂无通知</h3>
                        <p>您还没有收到任何通知</p>
                    </div>
                `;
                return;
            }

            container.innerHTML = notifications.map(notification => `
                <div class="notification-item ${notification.isRead ? '' : 'unread'}" onclick="markAsRead(${notification.id})">
                    <div class="notification-header">
                        <div class="notification-title">${notification.title}</div>
                        <div class="notification-time">${formatDate(notification.createTime)}</div>
                    </div>
                    
                    <div class="notification-content">${notification.content}</div>
                    
                    <div class="notification-type type-${getTypeClass(notification.type)}">
                        ${getTypeText(notification.type)}
                    </div>
                </div>
            `).join('');
        }

        // 获取类型样式类
        function getTypeClass(type) {
            const typeMap = {
                'SYSTEM': 'system',
                'MESSAGE': 'message',
                'WORK_ORDER': 'work-order',
                'COMPLAINT': 'complaint',
                'RULE_CHANGE': 'rule-change'
            };
            return typeMap[type] || 'system';
        }

        // 获取类型文本
        function getTypeText(type) {
            const typeMap = {
                'SYSTEM': '系统通知',
                'MESSAGE': '消息通知',
                'WORK_ORDER': '工单通知',
                'COMPLAINT': '投诉通知',
                'RULE_CHANGE': '规则变更'
            };
            return typeMap[type] || type;
        }

        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return 'N/A';
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }

        // 标记为已读
        function markAsRead(id) {
            fetch(`/after_sale_system/api/notification/read/${id}`, {
                method: 'PUT'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新UI
                    const item = document.querySelector(`[onclick="markAsRead(${id})"]`);
                    if (item) {
                        item.classList.remove('unread');
                    }
                }
            })
            .catch(error => {
                console.error('标记已读失败:', error);
            });
        }

        // 全部标记为已读
        function markAllAsRead() {
            if (confirm('确定要将所有通知标记为已读吗？')) {
                fetch('/after_sale_system/api/notification/read-all', {
                    method: 'PUT'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('已全部标记为已读');
                        loadNotifications();
                    } else {
                        alert('操作失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('标记全部已读失败:', error);
                    alert('操作失败，请稍后重试');
                });
            }
        }

        function showError(message) {
            alert(message);
        }
    </script>
</body>
</html> 